<template>
  <div class="home">
    <router-view></router-view>
    <ul class="nav">
      <router-link
       :to="{ name: item.href
          }"
       v-for = "(item,index) in tabs"
       :key="index"

       :class= "curtab == item.id"
       tag = "li">
          <i :class = "item.img"></i>
          <span>{{item.title}}</span>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
  data(){
    // props: {
      return {
          curtab:"home_index",
          tabs:[
              {
                id:"home_index",
                href:"home_index",
                title : "首页",
                img   : "iconfont icon-eleme",
              },
              {
                id:"home_search",
                href:"home_search",
                title : "发现",
                img   : "iconfont icon-find"
              },
              {
                id:"home_myOrder",
                href:"home_myOrder",
                title : "订单",
                img   : "iconfont icon-order"
              },
              {
                id:"home_myInfo",
                href:"home_myInfo",
                title : "我的",
                img   : "iconfont icon-self"
              },
            ]
        }
      },
  }
// }
</script>
<style lang="scss">
  .home{
    height:100%;
    .nav{
      width:100%;
      position:fixed;
      bottom:0;
      height:0.5rem;
      background:#fff;
      display: flex;
      z-index: 100;
      li{
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .router-link-active{
        color:#008eff;
      }

    }
  }
</style>

